<script setup lang="ts">
const props = defineProps<{
  type?: string;
  disabled?: boolean;
}>();
const emits = defineEmits<{
  (e: 'change', params: { id: string; data: string } | null): void;
}>();

const querier = useQuery({
  refetchOnWindowFocus: false,
  queryKey: [apis.apiCaptchaGet.id, () => props.type],
  queryFn: () => apis.apiCaptchaGet({ type: props.type }),
});

watch(querier.data, data => emits('change', data ?? null));

defineExpose({
  querier: reactive(querier),
  getData() {
    return querier.data.value;
  },
  refresh() {
    querier.refetch();
  },
});
</script>

<template>
  <div
    class="h-10 w-33 rounded-2 bg-white/80"
    :class="[props.disabled ? 'opacity-50 pointer-events-none' : '']"
    @click="querier.refetch()"
  >
    <div v-if="querier.isFetching.value" class="h-full w-full flex items-center justify-center">
      <i class="i-svg-spinners:180-ring-with-bg color-brand" />
    </div>
    <img v-else :src="querier.data.value?.data" class="block h-full w-full cursor-pointer select-none">
  </div>
</template>
